模塊化 (Modularization)

模塊化是將代碼分成更小的、可重用的部分（模塊），這樣作能夠使代碼更加清晰、可維護且易於測試。隨著應用程序的增長，模塊化可以幫助我們組織代碼，避免命名衝突，並提高代碼的可維護性。在JavaScript 中，ES6引入了原生的模塊系統，允許開發者通過import和export來管理模塊。這一特性對於大型應用開發尤其有用。

模塊的基本概念

模塊 (Module)：模塊是一個單獨的文件，裡面可以包含變量、函數、類等。每個模塊都有自己的作用域，模塊中的變量和函數默認是私有的，只有明確通過export出的內容才能被其他模塊使用。

模塊的導出 (export)

使用export將模塊中的變量、函數、類導出，使其可以在其他模塊中使用。有兩種導出方式：具名導出 和 默認導出。

1. 具名導出 (Named Export)
   這種方式允許你導出多個變量、函數、類等，每個導出的項目都需要具名。

// math.js
export const PI = 3.14;
export function add(a, b) {
    return a + b;
}
export function subtract(a, b) {
    return a - b;
}

這裡我們導出了常量PI和兩個函數add和subtract。它們可以被其他模塊導入和使用。

2. 默認導出 (Default Export)
   默認導出允許你為每個模塊指定一個主導出的項目。每個模塊只能有一個默認導出。

// greet.js
export default function greet(name) {
    return `Hello, ${name}!`;
}
在這裡，我們導出了一個默認函數 greet，這個模塊沒有其他具名導出。

模塊的導入 (import)

1. 導入具名導出
   當使用具名導出時，導入時必須使用與導出時相同的名稱，並使用大括號 {} 。使用import來導入其他模塊導出的內容，以便在當前模塊中使用。

// main.js
import { PI, add, subtract } from './math.js';

console.log(PI);             // 3.14
console.log(add(2, 3));       // 5
console.log(subtract(5, 2));  // 3

在這裡，我們從 math.js文件中導入了三個具名導出內容PI、add和subtract。

2. 導入默認導出
   當使用默認導出時，導入時不需要使用大括號 {}，並且可以為導入的默認項目指定任何名稱。

// main.js
import greet from './greet.js';

console.log(greet('Alice'));  // Hello, Alice!
這裡我們從 greet.js 文件中導入了默認導出內容 greet 函數。

3. 混合導入
   模塊中可以同時有具名導出和默認導出，導入時可以結合使用。

// math.js
export const PI = 3.14;
export default function multiply(a, b) {
    return a * b;
}

// main.js
import multiply, { PI } from './math.js';

console.log(PI);               // 3.14
console.log(multiply(2, 3));    // 6
在這裡，我們同時導入了 PI（具名導出）和 multiply（默認導出）。

導出和導入的重命名

模塊可以在導出或導入時對名稱進行重命名，這在名稱衝突或想要使用更具描述性的名稱時非常有用。

1. 導出時重命名

// math.js
const PI = 3.14;
function add(a, b) {
    return a + b;
}
export { PI as CirclePI, add as sum };
這裡我們將 PI 重命名為 CirclePI，add 重命名為 sum。

2. 導入時重命名

// main.js
import { CirclePI, sum } from './math.js';

console.log(CirclePI);        // 3.14
console.log(sum(2, 3));       // 5

在這裡，我們按重命名後的名稱導入了 CirclePI 和 sum。

模塊的再導出 (Re-export)

你還可以將從其他模塊導入的內容再導出，這樣可以創建一個「聚合模塊」，將多個模塊中的內容合併在一起。

// additionalMath.js
export { PI, add } from './math.js';
export const multiply = (a, b) => a * b;
在這裡，我們從 math.js 模塊中導入 PI 和 add，並再次導出它們，還導出了一個新的 multiply 函數。

動態導入
除了靜態導入（在代碼頂部使用 import），ES2020 引入了動態導入 (import())，允許在需要的時候動態加載模塊。這對於按需加載（例如懶加載或路由）非常有用。

// main.js
import('./math.js').then(math => {
    console.log(math.add(2, 3));  // 5
});

這裡我們在需要時動態加載 math.js，並在加載完成後執行其中的 add 函數。